window.onload=function(){
//            var dataList = $.parseJSON($(".div_data_center").html());
    var app = new Vue({
        el:"#PC",
        data:{
            message:"",
            grade:"",
            htp:"",
            data:"",
            arrays:[],
            lists:[],
            member:""
        },
        methods:{
            cartView:function(){
                var dataList = $.parseJSON($(".div_data_center1").html());

                var dataLists = $.parseJSON($(".div_data_center2").html());

                this.grade =dataLists.grade;//当前用户vip身份等级
                var gs = this.grade-1;

                // 当前等级进度条加载动画
                var progress = Math.ceil((gs/5+(dataList.progress)/5)*100);

                var current = 0;
                var interval = setInterval(increment,1000/progress);
                function increment(){
                    current++;
                    if(current==20){
                      $(".ul_flex li:nth-child(2)").addClass("ul_li")
                    }else if(current==40){
                        $(".ul_flex li:nth-child(3)").addClass("ul_li")
                    } else if(current==60){
                        $(".ul_flex li:nth-child(4)").addClass("ul_li")
                    }else if(current==80){
                        $(".ul_flex li:nth-child(5)").addClass("ul_li")
                    }else if(current==100){
                        $(".ul_flex li:nth-child(6)").addClass("ul_li")
                    }
                    if(current == progress) {//文字百分比终点值
                        // console.log(current);
                        // 到达目标节点  清楚定时器
                        clearInterval(interval)
                    }
                }
                // 进度调
                $(".div_animate").animate({
                    width:progress+"%"
                },1000);


                // $(".div_animate").css({"width":progress+"%"});
                if(this.grade == "1"){
                    this.member = "白银会员"
                }else if(this.grade == "2"){
                    this.member = "黄金会员"
                }else if(this.grade =="3"){
                    this.member = "铂金会员"
                }else if(this.grade =="4"){
                    this.member = "钻石会员"
                }else if(this.grade =="5"){
                    this.member = "至尊会员"
                }else if(this.grade == "6"){
                    $(".spans_box").remove()
                };
                if(this.grade==1){
                    $($(".momber_type")[0]).addClass("momber_type1")
                }else if(this.grade==2){
                    $($(".momber_type")[0]).addClass("momber_type2")
                }else if(this.grade==3){
                    $($(".momber_type")[0]).addClass("momber_type3")
                }else if(this.grade==4){
                    $($(".momber_type")[0]).addClass("momber_type4")
                }else if(this.grade==5){
                    $($(".momber_type")[0]).addClass("momber_type5")
                }else if(this.grade==6){
                    $($(".momber_type")[0]).addClass("momber_type6")
                }
                this.message = dataLists.card;
                this.data = dataList;
                var lists = this.data.vip_grade;
                for(var key in lists){
                    this.arrays.push(lists[key])
                }
                for(var i=0;i<this.arrays.length;i++){
                    if(i==0){
                        this.lists.push(this.arrays[i].max)
                    }else{
                        this.lists.push(this.arrays[i].min)
                    }
                }
                var animates =  $(".ul_center li div");
                var ul_center_img = $(".ul_center li img");

                var close = 0;//开关 管理当前 鼠标连续性移入移出 多个板块时的状态
                for(var i=0;i<animates.length;i++){
                    (function(i){
                        $(animates[i]).on("mouseover",function(){
                                    close = 0;
                                    $($(".div_UL li")[0]).removeClass("slideDowns");
                                    $($(".div_UL li")[i]).addClass("slideDowns");
                                    $(".ul_center img").removeClass("img_show");
                                    $(ul_center_img[i]).addClass("img_show");

                        });
                        $(animates[i]).on("mouseout",function(){
                            $($(".div_UL li")[i]).removeClass("slideDowns");
                            $(ul_center_img[i]).removeClass("img_show");

                            close = 1;
                            setTimeout(function(){
                              if(close==1){
                                  $($(".div_UL li")[0]).addClass("slideDowns")
                                  // $(ul_center_img[0]).addClass("img_show")
                                  $(ul_center_img[0]).addClass("img_show");

                              }
                            },1000)
                        });
                    }(i))
                }
            },
            redBtn:function(id,e,get_draw){

                var text = e.currentTarget.innerHTML;
                var obj = e.currentTarget;
                // console.log(id)
                if(get_draw == 1){
                    //    领取次数已经使用完
                    // console.log(get_draw)
                }else{
                    if(text === "立即领取"){
                        // console.log(id)
                        this.$http({
                            method:"post",
                            url:"/uc/power/draw",
                            params:{
                                id:id
                            }
                        }).then(function(data){

                            if(data.data.code == 1){
//                          领取成功
                                layer.alert("领取成功");
                                $(obj).html("已领取");
                                $(obj).removeClass("DJ_color");
                                $(obj).addClass("dj_color")
                            }else{
//                          已领取
                                layer.alert("领取失败");
                                return
                            }
                            // console.log(data)
                        }),function(error){
                            // console.log(error)
                        }
                    }else{
                        return



                    }
                }


//
//                 var text = e.currentTarget.innerHTML;
//                 var obj = e.currentTarget;
//
//                 if(text === "立即领取"){
//                     this.$http({
//                         method:"post",
//                         url:"/uc/power/draw",
//                         params:{
//                             id:id
//                         }
//                     }).then(function(data){
//                         if(data.data.code == 1){
// //                          领取成功
//                             alert("领取成功  ");
//                             $(obj).html("已领取");
//                             $(obj).removeClass("DJ_color")
//                             $(obj).addClass("dj_color")
//                         }else{
// //                          已领取
//                             alert("领取失败");
//                             return
//                         }
//                     }),function(error){
//                         console.log(error)
//                     }
//                 }else{
//                     return
//                 }

            }
        },
        mounted:function(){
            this.cartView()
        },
        filters:{
            types:function(type){

                if(type==2){

                    //加息券类型
                    return "%"
                }else if(type==1){
                    //红包类型
                    return "元"
                }
            },
            btn:function(a,b){
                var grade = app.grade;
                // console.log(grade +"____"+ b)
                if(a==0){
                    if(grade>=b){
                        return "立即领取"
                    }else if(grade<b) {

                        if (b == 2) {
                            return "白银及以上专享"
                        } else if (b == 3) {
                            return "黄金及以上专享"
                        } else if (b == 4) {
                            return "铂金及以上专享"
                        } else if (b == 5) {
                            return "钻石及以上专享"
                        } else if (b == 6) {
                            return "至尊及以上专享"
                        }
                    }
                }
                else if(a==1){

                    return "已领取"
                }

            }

        }
    });
}